@charset "utf-8";
/* 声明样式表 css指定编码集 防止乱码*/
/* 2.通用的样式： 所有元素去掉内外边距
     元素--盒模型中：内外边距+内容=边框
	               *元素默认自带外边距：body、h1~h6、p、ul/ol
     ④通用选择器：选中所有元素添加【效果】样式
	  语法：*{默认需要效果}
*/
*{
	margin:0;
	padding:0;
	/* 字体属性 */
	font-family: "华文彩云";
	font-size: 80px;
}

body{
	/* 背景属性【复合属性：省去部分属性值】
	background: color, image, origin 与 size, repeat
	常用简写：image   size   repeat 
	用途：频繁改变位置的图片，与img元素固定在一个位置
	子属性：background-color 背景颜色属性【二选一】
	       background-image 背景图片属性【二选一】
		                    属性值：url(路径)/url(""或")
		   background-size  背景尺寸属性
							属性值1个，属性值2个【推荐】
							X轴【宽度】  Y轴【高度】
		   background-size  背景平铺效果
						   属性值 no-repeat 不平铺
	*/
	background: url(../img/bg.jpg);
	/* 背景尺寸属性 */
	background-size: 100% 723px;
	/* 背景平铺属性 */
	background-repeat: no-repeat;
}
/* 熊猫 */
.bear{
	width: 200px;
	height: 300px;
	/* 判断选择器是否选中 */
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	background: url(../img/bear_1.png);
	/* 出现背景-背景图大于空间--设置背景尺寸 */
	background-size: 100% 100%;
	/* 相对定位 */
	position:relative;
	top:2px;
	left:14px;
	animation: bear 8s linear infinite;
}
/* 动画：1.写关键帧  2.找到元素添加动画属性
       关键帧特点，在启动元素动画位置，继承父元素：定位、背景、空间
*/
@keyframes bear{
	      /* 简单位移 */
	0%{  /* 初始化*/
		top:2px;
		left:14px;
		transform: rotate(100deg) scale(1);
	}
	10%{
		top:2px;
		left:345px;
		background: url(../img/bear_1.png);
		/* 背景尺寸：背景空间与实际图片不符 */
		background-size: 100% 100%;
		transform: rotate(200deg) scale(1);
	}
	20%{
		top:2px;
		left:620px;
		background: url(../img/bear_2.png);
		background-size: 100% 100%;
		transform: rotate(300deg) scale(2);
	}
	30%{
		top:2px;
		left:900px;
		background: url(../img/bear_3.png);
		background-size: 100% 100%;
		transform: rotate(400deg) scale(3);
	}
	40%{
		top:144px;
		left:1020px;
		background: url(../img/bear_4.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(3);
	}
	50%{
		top:315px;
		left:1020px;
		background: url(../img/bear_5.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(3);
	}
	60%{
		top:315px;
		left:888px;
		background: url(../img/bear_6.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(3);
	}
	70%{
		top:315px;
		left:666px;
		background: url(../img/bear_7.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(3);
	}
	80%{top:315px;
		left:350px;
		background: url(../img/bear_8.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(3);
	}
	90%{
		top:315px;
		left:200px;
		background: url(../img/bear_9.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(3);
	}
	100%{
		top:144px;
		left:36px;
		background: url(../img/bear_10.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(2);
	}
}